<template>
	<div class="content">
		<el-card class="box-card">
			<div class="tech-topView row" @click="goBack">
				<i class="el-icon-back" />
				<div class="el-title-text">客户详情</div>
			</div>
			<el-form ref="form" :model="form" :rules="rules">
				<div class="row page-main">
					<image-preview :src="form.userAvatar" :width="80" :height="80" />
					<div class="mg-ml">
						<div>{{form.userNikeName}}</div>
						<div class="row info-list flex-y-center mb-sm mt-sm">
							<div class="info-item">消费总金额：<span>¥{{form.totalConsume}}</span></div>
							<div class="info-item">本月消费金额：<span>¥{{form.monthConsume}}</span></div>
							<div class="info-item">总退款金额：<span>¥{{form.totalRefund}}</span></div>
							<div class="info-item">本月退款金额：<span>¥{{form.monthRefund}}</span></div>
						</div>
						<div class="row info-list flex-y-center mb-sm mt-sm">
							<div class="info-item">储值余额：<span>¥{{form.userBalance}}
									<el-button type="text" plain size="mini" @click="handleLabel">余额管理</el-button>
								</span></div>
							<div class="info-item">消费次数：<span>{{form.placeOrderCount}}</span> </div>
							<div class="info-item">会员等级：<span>{{form.userVipName}}</span></div>
						</div>
					</div>
				</div>
			</el-form>
		</el-card>

		<el-card class="box-card">
			<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
				<el-tab-pane label="用户信息" name="first">

					<div class="lb-goods-edit-classify row mb-lg">
						<div class="title">基本信息</div>
					</div>
					<div class="row info-list flex-y-center mb-sm mt-sm">
						<div class="info-item">用户ID：<span>{{form.id}}</span></div>
						<div class="info-item">手机号码：<span>{{form.userTel}}</span></div>
						<div class="info-item">支付宝账号：<span>-</span></div>
						<div class="info-item">注册时间：<span>{{form.createTime}}</span></div>
					</div>
					<div class="row info-list flex-y-center mb-sm mt-sm">
						<div class="info-item">客户来源：<span>{{form.userSource}}</span></div>
						<div class="info-item">所在地区：<span>{{form.userRegion}}</span></div>
					</div>

					<div class="lb-goods-edit-classify row mb-lg">
						<div class="title">用户概况</div>
					</div>
					<div class="c-title text-bold pb-md">用户标签：</div>
					<div class="row pb-lg">
						<el-tag v-for="(tag,index) in form.userLabelName" :key="tag.id" closable
							@close="handleClose(tag)">
							{{tag.name || tag.labelName}}
						</el-tag>
						<el-select v-model="newLable" placeholder="请选择" v-if="inputVisible">
							<el-option v-for="item in userLabelList" :key="item.id" :label="item.labelName"
								:value="item.id" @click.native="handleChange(item)">
							</el-option>
						</el-select>
						<el-button v-else class="button-new-tag" size="mini" @click="showInput">+ 新增标签</el-button>
					</div>

					<div class="lb-goods-edit-classify row mb-lg">
						<div class="title">支付宝信息</div>
					</div>
					<div class="row info-list flex-y-center mb-sm mt-sm" v-if="userZfbCountList">
						<div class="info-item">
							真实姓名：<span>{{userZfbCountList.userName?userZfbCountList.userName:'-'}}</span></div>
						<div class="info-item">
							支付宝账号：<span>{{userZfbCountList.userTel?userZfbCountList.userTel:'-'}}</span></div>
					</div>
				</el-tab-pane>
				<el-tab-pane label="消费记录" name="second">
					<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
						label-width="68px">
						<el-form-item label="订单编号" prop="orderNo">
							<el-input v-model="queryParams.orderNo" placeholder="请输入订单编号" clearable
								@keyup.enter.native="handleQuery" />
						</el-form-item>
						<el-form-item label="消费类型" prop="consumptionType">
							<el-select v-model="queryParams.consumptionType" placeholder="请选择消费类型" clearable>
								<el-option v-for="dict in dict.type.consume_type" :key="dict.value" :label="dict.label"
									:value="dict.value" />
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" icon="el-icon-search" size="mini"
								@click="handleQuery">搜索</el-button>
							<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
						</el-form-item>
					</el-form>
					<el-table v-loading="loading" :data="userConsumeDetailList">
						<el-table-column label="ID" align="center" prop="id" />
						<el-table-column label="订单编号" align="center" prop="orderNo" />
						<el-table-column label="金额" align="center" prop="consumptionPrice" />
						<el-table-column label="消费类型" align="center" prop="consumptionType">
							<template slot-scope="scope">
								<dict-tag :options="dict.type.consume_type" :value="scope.row.consumptionType" />
							</template>
						</el-table-column>
						<el-table-column label="描述" align="center" prop="consumptionDescribe" />
						<el-table-column label="创建时间" align="center" prop="createTime" width="180">
							<template slot-scope="scope">
								<span>{{ parseTime(scope.row.createTime) }}</span>
							</template>
						</el-table-column>
					</el-table>
					<pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
						:limit.sync="queryParams.pageSize" @pagination="userConsumeList" />
				</el-tab-pane>

				<el-tab-pane label="地址管理" name="third">
					<el-table v-loading="loading" :data="userAddressList">
						<el-table-column label="ID" align="center" prop="id" />
						<el-table-column label="姓名" align="center" prop="addressName" />
						<el-table-column label="手机号" align="center" prop="addressTel" />
						<el-table-column label="地址" align="center" prop="address" />
						<el-table-column label="详细地址" align="center" prop="addressDetails" />
						<el-table-column label="地址类型" align="center" prop="addressType">
							<template slot-scope="scope">
								<dict-tag :options="dict.type.address_type" :value="scope.row.addressType" />
							</template>
						</el-table-column>
						<el-table-column label="创建时间" align="center" prop="createTime" width="180">
							<template slot-scope="scope">
								<span>{{ parseTime(scope.row.createTime) }}</span>
							</template>
						</el-table-column>
					</el-table>
					<pagination v-show="addTotal>0" :total="addTotal" :page.sync="queryParams.pageNum"
						:limit.sync="queryParams.pageSize" @pagination="addressList" />
				</el-tab-pane>


				<el-tab-pane label="持有优惠券" name="four">
					<el-button type="primary" icon="el-icon-plus" @click="couponAdd" class="mb-lg">新增</el-button>
					<el-table v-loading="loading" :data="userCouponList">
						<el-table-column label="ID" align="center" prop="id" />
						<el-table-column label="优惠券" align="center" prop="couponName" />
						<el-table-column label="满" align="center" prop="couponFull" />
						<el-table-column label="减" align="center" prop="couponSubtract" />
						<el-table-column label="使用状态" align="center" prop="couponStatus">
							<template slot-scope="scope">
								<dict-tag :options="dict.type.coupon_status" :value="scope.row.couponStatus" />
							</template>
						</el-table-column>
						<el-table-column label="适用范围" align="center" prop="couponScopeApplication">
							<template slot-scope="scope">
								<el-button type="primary" plain size="mini"
									v-if="scope.row.couponScopeApplication==0">全场通用</el-button>
								<el-button type="success" plain size="mini"
									v-else>{{scope.row.technicianName}}专用</el-button>
							</template>
						</el-table-column>
						<el-table-column label="过期时间" align="center" prop="closeTime" width="180">
							<template slot-scope="scope">
								<span>{{ parseTime(scope.row.closeTime) }}</span>
							</template>
						</el-table-column>
						<el-table-column label="优惠券来源" align="center" prop="couponType">
							<template slot-scope="scope">
								<dict-tag :options="dict.type.user_coupon_type" :value="scope.row.couponType" />
							</template>
						</el-table-column>
						<el-table-column label="获得时间" align="center" prop="createTime" width="180">
							<template slot-scope="scope">
								<span>{{ parseTime(scope.row.createTime) }}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
							<template slot-scope="scope">
								<el-button size="mini" type="text" icon="el-icon-edit"
									@click="couHandleUpdate(scope.row)"
									v-hasPermi="['userCoupon:userCoupon:edit']">修改</el-button>
								<el-button size="mini" type="text" icon="el-icon-delete"
									@click="handleDelete(scope.row)"
									v-hasPermi="['userCoupon:userCoupon:remove']">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
				<el-tab-pane label="银行卡" name="five">
					<el-table v-loading="loading" :data="userBackList">
						<el-table-column label="ID" align="center" prop="id" />
						<el-table-column label="银行卡" align="center" prop="backName" />
						<el-table-column label="银行卡logo" align="center" prop="backLogo">
							<template slot-scope="scope">
								<image-preview :src="scope.row.backLogo" :width="50" :height="50" />
							</template>
						</el-table-column>
						<el-table-column label="持卡人姓名" align="center" prop="backUserName" />
						<el-table-column label="银行卡号" align="center" prop="backIdcard" />
						<el-table-column label="所属分行" align="center" prop="backBranch" />
						<el-table-column label="添加时间" align="center" prop="createTime" width="180">
							<template slot-scope="scope">
								<span>{{ parseTime(scope.row.createTime) }}</span>
							</template>
						</el-table-column>
					</el-table>
					<pagination v-show="backTotal>0" :total="backTotal" :page.sync="queryParams.pageNum"
						:limit.sync="queryParams.pageSize" @pagination="bankList" />
				</el-tab-pane>
			</el-tabs>
		</el-card>

		<!-- 添加或修改持有优惠卷对话框 -->
		<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
			<el-form ref="form" :model="couForm" :rules="rules" label-width="80px">
				<el-form-item label="优惠券" prop="couponId" v-if="title=='新增优惠券'">
					<el-select v-model="couForm.couponId" placeholder="请选择" @change="couChoseFrom">
						<el-option v-for="item in couponConfigList" :key="item.id" :label="item.couponName"
							:value="item.id">
						</el-option>
					</el-select>

				</el-form-item>
				<el-form-item label="优惠券" prop="couponName" v-else>
					<el-input v-model="couForm.couponName" placeholder="请输入" :disabled="true" />
				</el-form-item>
				<el-form-item label="满" prop="couponFull">
					<el-input v-model="couForm.couponFull" placeholder="请输入" :disabled="true" />
				</el-form-item>
				<el-form-item label="减" prop="couponSubtract">
					<el-input v-model="couForm.couponSubtract" placeholder="请输入" :disabled="true" />
				</el-form-item>
				<el-form-item label="使用状态" prop="couponStatus">
					<dict-tag :options="dict.type.coupon_status" :value="couForm.couponStatus" />
				</el-form-item>
				<!-- <el-form-item label="使用状态" prop="couponStatus">
					<el-radio-group v-model="couForm.couponStatus">
						<el-radio v-for="dict in dict.type.coupon_status" :key="dict.value"
							:label="parseInt(dict.value)">{{dict.label}}</el-radio>
					</el-radio-group>
				</el-form-item> -->
				<!-- <el-form-item label="使用状态" prop="couponStatus" v-else>
					<el-radio-group v-model="couForm.couponStatus">
						<el-radio v-for="dict in dict.type.coupon_status" :key="dict.value"
							:label="parseInt(dict.value)">{{dict.label}}</el-radio>
					</el-radio-group>
				</el-form-item> -->
				<el-form-item label="适用范围" prop="couponScopeApplication">
					<div v-if="couForm.couponId">
						<el-button type="primary" plain size="mini" v-if="couForm.technicianName==''">全场通用</el-button>
						<el-button type="success" plain size="mini" v-else>{{couForm.technicianName}}专用</el-button>
					</div>
				</el-form-item>
				<el-form-item label="过期时间" prop="closeTime">
					<el-date-picker clearable v-model="couForm.closeTime" type="datetime"
						value-format="yyyy-MM-dd HH:mm:ss" placeholder="请选择过期时间">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="数量" prop="closeTime" v-if="title=='新增优惠券'">
					<el-input-number size="small" v-model="count" :min="1" :max="10" label="数量" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="couSubmitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>

		<!-- 添加或修改客户黑名单对话框 -->
		<el-dialog :title="bankTitle" :visible.sync="bankOpen" width="500px" append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<el-form-item label="余额" prop="userBalance">
					<el-input v-model="form.userBalance" placeholder="请输入余额" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getUser,
		selectUser,
		addSelectUser,
		addUser,
		updateUser,
		delUserLabel
	} from "@/api/user/user";
	import {
		listUserConsumeDetail
	} from "@/api/userConsumeDetail/userConsumeDetail";
	import {
		listUserAddress
	} from "@/api/userAddress/userAddress";
	import {
		listUserCoupon,
		delUserCoupon,
		addUserCoupon,
		updateUserCoupon,
		getUserCoupon
	} from "@/api/userCoupon/userCoupon";
	import {
		listCouponConfig,
		getCouponConfig,
	} from "@/api/couponConfig/couponConfig";
	import {
		listUserBack
	} from "@/api/userBack/userBack";
	import {
		listUserZfbCount
	} from "@/api/userZfbCount/userZfbCount";
	import {
		listUserLabel
	} from "@/api/userLabel/userLabel";
	export default {
		dicts: ['consume_type', 'user_coupon_type', 'coupon_status', 'address_type'],
		data() {
			return {
				id: '',
				newLable: '',
				count: 1,
				inputVisible: false,
				activeName: 'first',
				couponStatus: null,
				couponScope: null,
				isShelves: [{
					label: '全场通用',
					value: 0
				}, {
					label: '技师专用',
					value: 1
				}],
				// 显示搜索条件
				showSearch: true,
				// 遮罩层
				loading: true,
				// 弹出层标题
				title: "",
				bankTitle: "",
				// 选中数组
				ids: [],
				// 总条数
				total: 0,
				addTotal: 0,
				couTotal: 0,
				backTotal: 0,
				// 是否显示弹出层
				open: false,
				bankOpen: false,
				// 消费记录表格数据
				userConsumeDetailList: [],
				// 地址管理表格数据
				userAddressList: [],
				// 持有优惠卷表格数据
				userCouponList: [],
				couponConfigList: [],
				// 银行卡表格数据
				userBackList: [],
				userLabelList: [],
				// 用户支付宝账户表格数据
				userZfbCountList: {},
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					orderNo: null,
					consumptionType: null,
				},
				// 表单参数
				form: {},
				couForm: {},
				// 表单校验
				rules: {},
			}
		},
		created() {
			this.id = this.$route.query.id
			if (this.id) this.handleUpdate();
		},
		methods: {
			/** 查询消费记录列表 */
			userConsumeList() {
				this.loading = true;
				let data = {
					...this.queryParams,
					userId: this.id
				}
				listUserConsumeDetail(data).then(response => {
					this.userConsumeDetailList = response.rows;
					this.total = response.total
					this.loading = false;
				});
			},
			/** 查询地址管理列表 */
			addressList() {
				this.loading = true;
				let data = {
					...this.queryParams,
					userId: this.id
				}
				listUserAddress(data).then(response => {
					this.userAddressList = response.rows;
					this.addTotal = response.total;
					this.loading = false;
				});
			},
			/** 查询持有优惠卷列表 */
			couponList() {
				this.loading = true;
				let data = {
					...this.queryParams,
					userId: this.id
				}
				listUserCoupon(data).then(response => {
					this.userCouponList = response.rows;
					this.total = response.total;
					this.loading = false;
				});
			},
			/** 查询卡券管理列表 */
			couConList() {
				this.loading = true;
				listCouponConfig({
					pageNum: 1,
					pageSize: 1000,
					couponStatus: 1
				}).then(response => {
					this.couponConfigList = response.rows;
					this.loading = false;
				});
			},
			/** 查询银行卡列表 */
			bankList() {
				this.loading = true;
				let data = {
					...this.queryParams,
					userId: this.id
				}
				listUserBack(data).then(response => {
					this.userBackList = response.rows;
					this.backTotal = response.total;
					this.loading = false;
				});
			},
			/** 查询用户支付宝账户列表 */
			userPayList() {
				this.loading = true;
				let data = {
					...this.queryParams,
					userId: this.id
				}
				listUserZfbCount(data).then(response => {
					this.userZfbCountList = response.rows[0];
					this.loading = false;
				});
			},
			/** 查询客户标签设置列表 */
			laberList() {
				this.loading = true;
				let data = {
					...this.queryParams
				}
				listUserLabel(data).then(response => {
					this.userLabelList = response.rows;
					this.loading = false;
				});
			},
			detaReset() {
				// 查询参数
				this.queryParams = {
					pageNum: 1,
					pageSize: 10,
					orderNo: null,
					consumptionType: null,
				}
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				if (this.activeName == 'second') this.userConsumeList()
				if (this.activeName == 'third') this.addressList()
				if (this.activeName == 'four') this.couponList()
				if (this.activeName == 'five') this.bankList()
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},
			/** 修改按钮操作 */
			handleUpdate() {
				getUser(this.id).then(response => {
					this.form = response.data;
					this.userPayList()
					this.laberList()
				});
			},
			/** 优惠券按钮操作 */
			couHandleUpdate(row) {
				this.couReset();
				const id = row.id || this.ids
				getUserCoupon(id).then(response => {
					this.couForm = response.data;
					this.open = true;
					this.title = "修改持有优惠卷";
				});
			},
			// 表单重置
			couReset() {
				this.couponStatus = null
				this.couponScope = null
				this.couForm = {
					id: null,
					userId: null,
					couponId: null,
					couponFull: null,
					couponSubtract: null,
					couponStatus: null,
					coupomScopeApplication: null,
					closeTime: null,
					couponType: null,
					isDelete: null,
					createTime: null,
					updateTime: null
				};
				this.resetForm("form");
			},
			// 取消按钮
			cancel() {
				this.open = false;
				this.bankOpen = false;
				this.couReset();
			},
			// 优惠券新增
			couponAdd() {
				this.open = true;
				this.title = '新增优惠券'
				this.couReset();
				this.couConList()
			},
			/** 删除按钮操作 */
			handleDelete(row) {
				const ids = row.id || this.ids;
				this.$modal.confirm('是否确认删除持有优惠卷编号为"' + ids + '"的数据项？').then(function() {
					return delUserCoupon(ids);
				}).then(() => {
					this.couponList();
					this.$modal.msgSuccess("删除成功");
				}).catch(() => {});
			},
			handleClose(tag) {
				delUserLabel({
					id: this.id,
					userLabel: tag.id,
				}).then(response => {
					this.$modal.msgSuccess("修改成功");
					this.handleUpdate()
				});
			},
			/** 提交按钮 */
			couSubmitForm() {
				this.couForm.userId = this.id
				this.couForm.count = this.count
				this.$refs["form"].validate(valid => {
					if (valid) {
						if (this.couForm.id != null) {
							updateUserCoupon(this.couForm).then(response => {
								this.$modal.msgSuccess("修改成功");
								this.open = false;
								this.couponList();
							});
						} else {
							addSelectUser(this.couForm).then(response => {
								this.$modal.msgSuccess("新增成功");
								this.open = false;
								this.couponList();
							});
						}
					}
				});
			},
			submitForm() {
				this.$refs["form"].validate(valid => {
					if (valid) {
						updateUser(this.form).then(response => {
							this.$modal.msgSuccess("修改成功");
							this.bankOpen = false;
							this.handleUpdate();
						});
					}
				});
			},
			couChoseFrom(e) {
				selectUser({
					id: e
				}).then(response => {
					this.couForm = response.data;
					console.log(this.couForm)
					if (this.couForm.couponScopeApplication == 0) {
						this.couponStatus = 0
					} else {
						this.couponStatus = 1
						this.couponScope = this.couForm.couponScopeApplication
					}
				});
			},
			// 标签点击
			handleClick(tab, event) {
				this.activeName = tab.name
				this.detaReset()
				if (this.activeName == 'second') this.userConsumeList()
				if (this.activeName == 'third') this.addressList()
				if (this.activeName == 'four') this.couponList()
				if (this.activeName == 'five') this.bankList()
			},
			// 查看标签按钮
			handleLabel() {
				this.bankTitle = '余额管理'
				this.bankOpen = true
			},
			showInput() {
				this.inputVisible = true;
				// this.$nextTick(_ => {
				// 	this.$refs.saveTagInput.$refs.input.focus();
				// });
			},
			handleChange(e) {
				let ids = []
				if (this.inputVisible) {
					let objid = e["id"]
					var index = this.form.userLabelName.findIndex(item => item.id == objid)
					if (index == -1) this.form.userLabelName.push(e);
				}

				this.form.userLabelName.forEach((item, i) => {
					ids.push(item.id)
				})
				this.form.userLabel = ids.toString()
				updateUser(this.form).then(response => {
					this.$modal.msgSuccess("修改成功");
					this.handleUpdate()
				});

				this.inputVisible = false;
				this.newLable = '';
			},

			// 表单重置
			reset() {
				this.form = {
					id: null,
					openId: null,
					unionid: null,
					userTel: null,
					userSex: null,
					userAvatar: null,
					userNikeName: null,
					userWxName: null,
					userBalance: null,
					userInvitationCode: null,
					userInvitedCode: null,
					userSource: null,
					userIdentity: null,
					userRegion: null,
					isDelete: null,
					createTime: null,
					updateTime: null
				};
				this.resetForm("form");
			},
			goBack() {
				this.reset()
				this.$commonJs.backRou()
			},
		}
	}
</script>

<style lang="less" scoped>
	.flex-y-center {
		display: -webkit-box;
	}

	.page-main {
		padding: 30px;
	}

	.mg-ml {
		margin-left: 20px;
	}

	.mb-lg {
		margin: 20px 0;
	}

	.mb-sm {
		margin-bottom: 5px;
	}

	.mt-sm {
		margin-top: 5px;
	}

	.pb-md {
		padding-bottom: 10px;
	}

	.pb-lg {
		padding-bottom: 15px;
	}

	.c-caption {
		color: #999999;
		height: 35px;
	}

	.f-caption {
		font-size: 12px;
	}

	.text-bold {
		font-weight: bold;
	}

	.c-title {
		color: #333333;
		font-size: 14px;
	}

	.box-card {
		margin: 20px;

		.mb-lg {
			margin-bottom: 15px;
		}
	}

	.tech-topView {
		border-bottom: 1px solid #e1e1e1;
		padding-bottom: 10px;

		.el-title-text {
			font-size: 14px;
			color: #666;
			margin-left: 10px;
		}
	}

	.info-list {
		width: calc(100% - 100px);

		.info-item {
			width: 25%;
			min-width: 200px;
			font-size: 14px;
			color: #666666;

			span {
				color: #444;
			}
		}
	}

	.lb-goods-edit-classify {
		width: 100%;
		border-top: 1px solid #eff2f6;
		display: -webkit-box;
		display: -ms-flexbox;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;

		.title {
			display: inline-block;
			padding: 6px 15px;
			color: #609beb;
			background: #f5f7fa;
			margin-right: 10px;
			font-size: 14px;
		}
	}

	.el-tag+.el-tag {
		margin-left: 10px;
	}

	.button-new-tag {
		margin-left: 10px;
	}
</style>